<template>
	<div>
		<!-- here is the nav start-->
		<div class="nav-head">
			<router-link to="/layout/own">
				<img class="arrow1" src="../../../assets/icon-return45.png">
			</router-link>
			<div class="title">歌单</div>
			<img class="arrow2" src="../../../assets/icon-pull45.png" alt="">
		</div>
		<!-- here is the nav end -->
		
		<!-- here is the author message start -->
		<div class="author-message-box">
			<!-- 调整间距 -->
			<p class="distance"></p>
			<!-- 作者的信息 -->
			<div class="author-message">
				<img class="creat" src="../../../assets/creat.jpg" alt="">
				<img class="author-pic" src="../../../assets/280.png" alt="">
				<span>小猫</span>
				<img class="author-arrow" src="../../../assets/icon-next32write.png" alt="">
			</div>
			<!-- 歌单的信息 -->
			<div class="song-share">
				<div class="item">
					<img src="../../../assets/icon-love.png" alt="">
					<p>82.5万</p>
				</div>
				<div class="item">
					<img src="../../../assets/icon-pinglun.png" alt="">
					<p>82.5万</p>
				</div>
				<div class="item">
					<img src="../../../assets/icon-share.png" alt="">
					<p>82.5万</p>
				</div>
				<div class="item">
					<img src="../../../assets/icon-download@2x32.png" alt="">
					<p>82.5万</p>
				</div>
			</div>
		</div>
		<!-- here is the author message end -->


		<!-- 播放全部开始 -->
		<div class="playall">
			<img src="../../../assets/icon-stop@2x45.png" alt="">
			<span>播放全部</span>
			<i>(456)</i>
		</div>
		<!-- 播放全部结束 -->

		<!-- 音乐列表 start-->
		<ul class="music-list">
			<li>
				<span>心愿便利贴</span>
				<p>时致</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>算什么男人</span>
				<p>哎呦-不错哦</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>天黑黑</span>
				<p>孙燕姿</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>一夜成长</span>
				<p>于文文</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>跳舞的梵谷</span>
				<p>孙燕姿</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>晴天</span>
				<p>周杰伦</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<span>醉赤壁</span>
				<p>林俊杰</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<!-- <li>
				<span>晴天</span>
				<p>周杰伦</p>
				<img class="mv" src="../../../assets/mv-logo-singer.png" alt="">
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li> -->
			
		</ul>
		
		<!-- 音乐列表 end-->

		<!-- <MusicPlayer /> -->
	</div>
</template>
<script>

	import MusicPlayer from "../../../components/music_player.vue"

	export default {
		name:'createMusicList',
		data(){
			return{
				
			}
		},
		components:{
			MusicPlayer
		}
	}
</script>
<style scoped lang="less">
	.creat{
		width: 180/100rem;
		height: 180/100rem;
		margin-left: 156/100rem;
	}
	.nav-head{
		width: 100%;
		height: 88/100rem;
		background:url('../../../assets/daohang.png');
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}
	.nav-head .arrow1{
		display: block;
		width: 27/100rem;
		height: 45/100rem;
		position: absolute;
		left: 20/100rem;
		top: 21.5/100rem;
	}
	.nav-head .title{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 36/100rem;
		color: #fff;
		line-height: 88/100rem;
	}
	.nav-head .arrow2{
		display: block;
		width: 45/100rem;
		height: 13/100rem;
		position: absolute;
		right: 20/100rem;
		top: 37.5/100rem;
	}
	//本地音乐的导航栏开始
	.author-message-box{
		width: 100%;
		height: 348/100rem;
		background: url(../../../assets/daohang.png);
		color: white;
		margin-top: 88/100rem;
		.distance{
			height: 45/100rem;
		}
		.author-message{
			height: 180/100rem;
			line-height: 180/100rem;
			margin-bottom: 24/100rem;
			img{
				vertical-align:middle;
			}
			.author-pic{
				width: 80/100rem;
				height: 80/100rem;
				margin-left: 50/100rem;
				vertical-align: middle;
			}
			.author-arrow{
				width: 20/100rem;
				height: 35/100rem;
				vertical-align: middle;
			}
			span{
				margin-left: 20/100rem;
				margin-right: 36/100rem;
			}
		}
		
	}
	.song-share{
		height: 123/100rem;
		display: flex;
		.item{
			flex:1;
			text-align: center;
			img{
				width: 28/100rem;
				height: 32/100rem;
			}
			p{
				margin-top: 20/100rem;
			}
		}
	}
	//本地音乐的导航栏结束
	// 播放全部开始
	.playall{
		width:100%;
		height:95/100rem;
		line-height: 95/100rem;
		background: white;
		// border-bottom: 2/100rem solid #333;
		img{
			width: 45/100rem;
			height: 45/100rem;
			vertical-align: middle;
			margin-left: 20/100rem;
			margin-right: 20/100rem;
			margin-top: -13/100rem;
		}
		span{
			display: inline-block;
			color:#333;
			font-family: "苹方";
			font-size: 30/100rem;
		}
		i{
			font-style: normal;
			color:#666;
			font-family: "苹方";
			font-size: 24/100rem;
			margin-left: 20/100rem;
		}
	}
	.music-list{
		background: white;
		margin-bottom: 30/100rem;
		li{
			height: 100/100rem;
			border-bottom: 1/100rem solid #ccc;
			overflow: hidden;
			position: relative;
			// the song name
			span{
				font-size: 24/100rem;
				color:#333;
				line-height: 65/100rem;
				margin-left: 20/100rem;
			}
			// the name of star
			p{
				font-size: 18/100rem;
				color:#666;
				margin-left: 20/100rem;
			}
			.point{
				position: absolute;
				right: 20/100rem;
				top: 48/100rem;
				width: 33/100rem;
				height: 9/100rem;
			}
			.mv{
				width: 54/100rem;
				height: 26/100rem;
				position: absolute;
				right: 120/100rem;
				bottom: 33/100rem;
			}
		}
	}
	.music-list .last{
		width: 155/100rem;
		line-height: 100/100rem;
		margin: 0 auto;
		border:none;
		span{
			font-size: 24/100rem;
		}
	}
	.last img{
		width: 26/100rem;
		height: 32/100rem;
		vertical-align: middle;
		margin-right: 20/100rem;
		margin-top: -10/100rem;
	}
	.music-list+p{
		width: 100%;
		height: 20/100rem;
		background: #dbd7df;
	}
	// 播放全部结束
	//你可能感兴趣的音乐单曲 开始
	.interest-title{
		background: white;
	}
	.interest-first{
		padding-left: 20/100rem;
		overflow: hidden;
	}
	.interest-title{
		font-size: 30/100rem;
		padding-top: 33/100rem;
	}
	.interest-close{
		float: right;
		width: 32/100rem;
		height: 32/100rem;
		margin-right: 20/100rem;
	}
	.interestlist{
		height: 344/100rem;
		padding-left: 20/100rem;
		padding-right: 20/100rem;
	}
	.interestlist li{
		float: left;
	}
	.interestlist img{
		width: 210/100rem;
		height: 210/100rem;
		margin-top: 27/100rem;
	}
	.interestlist div{
		font-size: 24/100rem;
		color:#333;
		margin-top: 12/100rem;
		margin-bottom: 20/100rem;
	}
	.interestlist p{
		margin-bottom: 52/100rem;
		font-size: 18/100rem;
		color:#666;
	}
	.interest-margin{
		margin-left: 38/100rem;
		margin-right: 38/100rem;
	}
	.interest-more{
		font-size: 24/100rem;
		margin-left: 250/100rem;
		padding-bottom: 40/100rem;
		background: white;
	}
	.interes-arrow{
		width: 20/100rem;
		height: 20/100rem;
	}
	//你可能感兴趣的音乐单曲 结束
	.margin-footer{
		height: 10/100rem;
		background: #E5E5E5;
	}
</style>